$(function() {
  var ROW = 2,
    podH = 0,
    podW = 0,
    COLUMN = 4;

  function layout() {
    podH = Math.floor(global.H / ROW);
    podW = Math.floor(global.W / COLUMN);
    $("#lookbook .gallery li.pod,#lookbook .gallery-nav").width(podW).height(podH);
    $("#lookbook .gallery-looper").each(function() {
      var $this = $(this);
      if ($this.hasClass("looper-1")) {
        $this.width(podW * (COLUMN - 1)).css('marginLeft', podW + "px");;
      }
    });
    $("#lookbook .gallery li.pod:not(.gallery-nav)").imagefill();
    $("#lookbook .gallery li.pod:not(.gallery-nav) .write-border").width(podW - 40).height(podH - 40);
  }
  $(".act-lnk-1").hover(function() {
    var $this = $(this);
    $this.text($this.data("zh"));
  }, function() {
    var $this = $(this);
    $this.text($this.data("en"));
  });
  $(".act-lnk-1").click(function() {
    $(".act-lnk-1").removeClass('active');
    $(this).addClass('active');
    buildGallery();
  })
  $(".act-lnk-2").click(function() {
    $(".act-lnk-2").removeClass('active');
    $(this).addClass('active');
    buildGallery();
  });
  // Layout
  layout();
  registerResize(layout);
  // build list
  // 1. clean dom
  // 2. rebuild dom
  // 3. apply pulgin
  function _applySimplyScroll() {
    $('.looper-1 .gallery').simplyScroll({
      "speed": 2
    });
    $('.looper-2 .gallery').simplyScroll({
      "direction": "backwards",
      "speed": 2
    });
  }
  var _curCategory = null,
    _curType = null;

var _tplString = '<li class="pod">'
                    +'<img src="<%= src %>">'
                    +'<div class="write-border">'
                    +'</div>'
                    +'<span class="edg-t">'
                    +'</span>'
                    +'<span class="edg-r">'
                    +'</span>'
                    +'<span class="edg-b">'
                    +'</span>'
                    +'<span class="edg-l">'
                    +'</span>'
                  +'</li>';
var _podTpl = _.template(_tplString);

  function _onGalleryClick(){
    ImageTour.show(this);

  }
  /**
   * Build gallery
   * @return {void}
   */
  function buildGallery() {
    try {
      var _c = $('.act-lnk-1.active').data("en").toLowerCase();
      var _t = $('.act-lnk-2.active').data("ref").toLowerCase();
      if (_curType == _t && _curCategory == _c) {
        return;
      }
      _curCategory = _c;
      _curType = _t;
      var data = SETTING.PRODUCTS[_curCategory][_curType];
      
      if (!data) return;
      $(".gallery-looper").empty();
      var row1 = data.row1,
        row2 = data.row2;
      var $ul1 = $("<ul class='gallery'></ul>");
      var $ul2 = $("<ul class='gallery'></ul>");
      _.each(row1,function(item,idx,lst){
        var _html = _podTpl({src:item});
        $(_html).appendTo($ul1);
      });
       _.each(row2,function(item,idx,lst){
        var _html = _podTpl({src:item});
        $(_html).appendTo($ul2);
      });

      $('.looper-1').append($ul1);
      $('.looper-2').append($ul2);
      
      layout();
      $('.gallery-looper li').click(_onGalleryClick);
      _applySimplyScroll();
    } catch (e) {console.log(e);}
  }
  /**
   * Set first list and build it
   */
  $('.act-lnk-1:first,.act-lnk-2:first').addClass('active');
  buildGallery();
});